<div ng-init="init();" class="kmi-layout-content mobile02-content">
    <div class="kmi-header-row">
        <div class="kmi-side-btn left" ng-click="back();">
            <i class="material-icons">&#xE408;</i>
            <div class="kmi-can-click"></div>
        </div>
        <div class="header-title" ng-bind="title"></div>
        <!--<div class="header-logo"></div>-->
    </div>
    <div class="kmi-layout-main-content system-info">
        <div class="kmi-row-fields" style="border-bottom:1px #cecece solid;padding-bottom: 8px;">
            <div class="column-item left">
                <label class="label" ng-bind="'home.onwork_time' | translate"></label>
                <label class="value" ng-bind="onwork_time"></label>
            </div>
            <div class="column-item right">
                <label class="label" ng-bind="'home.machine_count' | translate"></label>
                <label class="value" ng-bind="machines_length"></label>
            </div>
        </div>
        <div class="kmi-tab-content" style="border-bottom:1px #cecece solid;">
            <div class="tab" ng-click="mode = 'S'" ng-class="{'is-select':mode == 'S'}">
                <label ng-bind="'mobile02.mode.status' | translate" ></label>
                <div class="kmi-can-click"></div>
            </div>
            <div class="tab" ng-click="mode='C'" ng-class="{'is-select':mode == 'C'}">
                <label ng-bind="'mobile02.mode.check' | translate" ></label>
                <div class="kmi-can-click"></div>
            </div>
        </div>
        <div class="dashboard" ng-if="mode == 'S'">
            <div class="dashboard-content">
                <div class="dashboard-label-item" ng-repeat="item in status_list track by $index" ng-class="{'is-select': machine_status == item}">
                    <i class="material-icons">done</i>
                    <div class="label" ng-bind="'common.machine.status.'+item.code | translate"></div>
                    <div class="kmi-can-click" ng-click="changeStatus(item);"></div>
                </div>
            </div>
        </div>
        <div class="kmi-list" ng-show="mode == 'C'">
            <div class="kmi-list__row-content">
                <div class="kmi-row-fields row-content">
                    <div style='display: flex; flex:1;'>
                        <div class="column-item left" ng-bind="('mobile02.check_frequency'|translate)+'：'"></div>
                        <input ng-model="qc_frequency_display" readonly="readonly" ng-click="getEquipmentCheckUprate();" style='margin-right: 10px;flex: 1;height: 20px;text-align:left;'>
                        <div class="tip"><i class="material-icons">&#xE5CF;</i></div>
                        </input>
                    </div>
                    <div style='display: flex; flex:1;'>
                        <div class="column-item left" ng-bind="('mobile02.check_table'|translate)+'：'"></div>
                        <div ng-bind="checklist_display" readonly="readonly" style='margin-right: 10px;flex: 1;'></div>
                    </div>
                </div>
                <div class="row-content" ng-repeat="item in check_list track by $index">
                    <div class="kmi-row-fields">
                        <div class="column-item left row-title" ng-bind="item.item_no+'. '+item.check_item"></div>
                        <div class="column-item right" ng-if="item.check_type == '1'"  style="flex:1;" ng-bind="('mobile02.value_std'|translate)+item.std_value"></div>
                        <div class="column-item right" ng-if="item.check_type == '2'"  style="flex:1;" ng-bind="('mobile02.value_range'|translate)+item.range_min+' ~ '+item.range_max"></div>
                        <div class="column-item right" ng-if="item.check_type == '3'"  style="flex:2;" ng-bind="item.check_standard"></div>
                        <div class="column-item right" ng-if="item.check_type == '4'"  style="flex:1;" ng-bind="item.check_standard"></div>
                    </div>
                    <div class="kmi-row-fields">
                        <div class="column-item left" ng-bind="item.check_method"></div>
                        <div class="column-item" style="flex: 0 0 120px;" ng-if="item.check_type != '3'" >
                            <input ng-if="item.check_type == '1' || item.check_type=='2'" mdl-calculater="item.check_value" mdl-calculater-decimal="true" placeholder="{{'mobile02.check_value'|translate}}">
                            <input ng-if="item.check_type == '4'" ng-model="item.check_value" placeholder="{{'mobile02.check_value'|translate}}"/>
                        </div>
                        <div class="column-item" ng-if="item.check_type=='3'"  style="flex: 0 0 56px; padding: 0px 0px 0px 4px; z-index: 1; pointer-events: auto;">
                            <div ng-if="item.check_type=='3'" class="check-point-switch"
                                ng-class="{'is-selected':item.check_value == '1'}"
                                ng-click="itemClick(item);" ng-init='type3Init(item);'>
                                <div style="width:24px;height:24px;"></div>
                            </div>
                        </div>
                        <div ng-if="item.check_type!='3'" style="width:24px;height:24px;margin-left:5px" ng-class='[itemStatus(item)]'></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 20240108 add by Alan for #153321 : 設備稼動原因 -->
        <div class="kmi-row-fields" ng-if="mode == 'S' && showReasonList" style="padding: 8px 12px;">
            <div class="column-item" style="position: relative;">
                <label class="label" ng-bind="'mobile02.reason' | translate"></label>
                <input class="value" ng-model="machine_status.reason.display" style="margin-left: 8px;"/>
                <div class="tip search">
                    <img src="image/icons/search.png"></img> 
                </div>
                <div class="kmi-can-click" ng-click="openReasonList();"></div>
            </div>  
        </div>
        <div class="kmi-row-fields" ng-if="mode == 'S'" style="padding: 8px 12px;">
            <div class="column-item">
                <label class="label" ng-bind="'mobile02.handle_user_no' | translate"></label>
                <!-- 20200630 modify by WeiTing by M#71425 - 解決 scope 作用域的問題，可能會導致 ng-model 失效，所以改用物件的方式。 -->
                <input class="value" ng-model="handleObj.user_no" style="margin-left: 8px;"/>
                <div class="tip search" ng-click="loadHandleUserNoList();">
                    <img src="image/icons/search.png"></img> 
                </div>
            </div>  
        </div>
        <div class="kmi-row-fields" ng-if="mode == 'S'" style="padding-bottom: 8px;">
            <div class="column-item">
                <label class="label" ng-bind="'mobile02.plan_start_time' | translate" ng-hide="machine_status.code == 0 || machine_status.code == 1"></label>
                <label class="label" ng-bind="'mobile02.actual_end_time' | translate" ng-if="machine_status.code == 0 || machine_status.code == 1"></label>
                <input class="value date" mdl-datepicker="plan_work.date" />
                <input class="value time" mdl-timepicker="plan_work.time" />
            </div>
        </div>
        <div class="kmi-row-fields" ng-if="mode == 'S'">
            <div class="column-item">
                <label class="label" ng-bind="'mobile02.remarks' | translate"></label>
                <!-- 20200629 modify by WeiTing by M#71452 - textarea 無法用純值的方式搭配 ng-model，所以改用物件的方式。 -->
                <textarea class="value" style="flex: 1; border: 1px #cecece solid;" ng-model="remarks.text"></textarea>
            </div>
        </div>
        <div class="kmi-mobile__btn-content" style="text-align:center;">
            <button class="kmi-button__mobile" ng-click="confirm();">
                <label ng-bind="'common.btn.confirm' | translate"></label>
                <div class="kmi-can-click"></div>
            </button>
        </div>
    </div>
</div>
